<template>
    <div class="outline">
        <div class="addquestbox" @click="createEdit">添加问题</div>

        <div class="outline-title">
            {{totalTitle}}
        
        </div>
        <div class="questionOutline">
            <div class="outline-question" v-for="(item, index) in questionTitle" :key="item">
                <img :src="questionImg(index)" alt="">
                <div v-if="questionTopic(index)">
                    <span>{{questionIndex(index)}}.</span>{{item.title}}
                </div>
                <div v-else>
                    {{item.text}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '../../store'

export default {
    store,
    data() {
        return {
            img: {
                radio: require('../../assets/radio.png'),
                checkbox: require('../../assets/checkbox.png'),
                input: require('../../assets/input.png'),
                text: require('../../assets/text.png')
            },
        }
    },
    methods: {
        createEdit(){
            let hasEdit = false
            for(let i = 0; i < store.state.question[sessionStorage.getItem('index')].questions.length; i++) {
                if(store.state.question[sessionStorage.getItem('index')].questions[i].isEdit){
                    hasEdit = true
                    store.state.question[sessionStorage.getItem('index')].questions[i].questionBoxShake = true
                    setTimeout(() => {
                    store.state.question[sessionStorage.getItem('index')].questions[i].questionBoxShake = false }, 500)
                }
            }
            if(!hasEdit){
                store.commit('addQuestion', sessionStorage.getItem('index'))
            }
        },
    },
    computed: {
        totalTitle(){
            return store.state.question[sessionStorage.getItem('index')].totalTitle
        },
        questionTitle(){
            return store.state.question[sessionStorage.getItem('index')].questions
        },
        questionIndex(){
            return function(index){
                let qIndex = index + 1
                for(let i = 0; i < index; i++){
                    if (store.state.question[sessionStorage.getItem('index')].questions[i].type == 'text') {
                        qIndex = qIndex - 1
                    }
                }
                return qIndex
            }
        },
        questionImg(){
            return function(index){
                switch(store.state.question[sessionStorage.getItem('index')].questions[index].type){
                    case 'radio':
                        return this.img.radio
                    case 'checkbox':
                        return this.img.checkbox
                    case 'input':
                        return this.img.input
                    case 'text':
                        return this.img.text
                }
            }
        },
        questionTopic(){
            return function(index){
                if (store.state.question[sessionStorage.getItem('index')].questions[index].type == 'text') {
                    return false
                }
                else{
                    return true
                }
            }
        }
    }
}
</script>

<style scoped>
.outline{
    width: 300px;
    background-color: #2b343b;
}

.addquestbox{
    position: relative;
    width: 90%;
    height: 40px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #4187f6;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 1rem;
    cursor: pointer;
}

.questionOutline{
    position: relative;
    max-width: 90%;
    max-height: 80%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0 10px;
    border-left: 1px solid #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.outline-title{
    position: relative;
    width: 90%;
    height: 20px;
    margin: 0 auto;
    margin-top: 10px;
    color: #fff;
    line-height: 20px;
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.outline-question{
    position: relative;
    height: 24px;
    color: #fff;
    line-height: 24px;
    margin-bottom: 10px;
}

.outline-question > div{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.outline-question > img{
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    float: left;
}
</style>